<template>
  <el-dialog
    title="评论详情"
    :visible.sync="dialogVisible"
    class="dialog"
    width="470px">
    <div>
      <div v-for="(item, index) in detailItems" :key="index" class="align-center pb-20">
        <div class="pr-24" style="width: 80px; text-align: right; flex-shrink: 0">{{item.label}}</div>
        <div>{{detail[item.prop]}}</div>
      </div>
      <div class="pb-20 flex" v-if="detail.videoUrl || detail.pictureUrl">
        <div class="pr-24" style="width: 80px; text-align: right">{{`评价${detail.videoUrl ? '视频' : '图片'}`}}</div>
        <video :src="detail.videoUrl" v-if="detail.videoUrl" style="width: 300px;" controls></video>
        <div v-else>
          <el-image
            v-for="(image, index) in detail.pictureList"
            class="br-8 mr-8"
            style="width: 100px; height: 100px;"
            :src="image"
            :key="index"
            :preview-src-list="detail.pictureList">
          </el-image>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: {
    detail: Object,
    detailItems: Array,
  },
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    confirm() {
    },
  },
};
</script>
